import type { ProFormInstance } from '@ant-design/pro-form';
import {
  DrawerForm,
  ProFormDependency,
  ProFormDigit,
  ProFormSelect,
  ProFormSwitch,
  ProFormText,
  ProFormTextArea,
} from '@ant-design/pro-form';
import { Col, Row } from 'antd';
import React, { useRef } from 'react';
import { useModel } from 'umi';

import * as c from '@/services/consts';
import * as apiServiceType from '@/services/serviceType';

type FormProps = {
  visible: boolean;
  defaultProductId: number | undefined;
  current: API.ServiceSetModel | undefined;
  onCancel: () => void;
  onSubmit: (values: API.ServiceSetModel) => Promise<void>;
};

const Form: React.FC<FormProps> = (props) => {
  const { visible, defaultProductId, current, onCancel, onSubmit } = props;
  if (!visible) {
    return null;
  }

  let defaultCurrent: Partial<API.ServiceSetModel> | undefined = undefined;
  if (!current) {
    defaultCurrent = {
      licenseDays: 1,
      display: true,
      sort: 1,
      status: true,
      productId: defaultProductId,
    };
  }

  const formRef = useRef<ProFormInstance>();

  const { getProductOptions } = useModel('useGlobalModel', (model) => ({
    getProductOptions: model.getProductOptions,
  }));

  const productOptions = getProductOptions(false);

  const loadServiceTypes = async (params: { [key: string]: any }) => {
    const selectItems = await apiServiceType.select(params);

    return Promise.resolve(selectItems);
  };

  return (
    <DrawerForm<API.ServiceSetModel>
      open={visible}
      formRef={formRef}
      autoFocusFirstInput
      width={800}
      title={`${current ? '编辑' : '添加'}套餐`}
      initialValues={current ? current : defaultCurrent}
      onFinish={onSubmit}
      drawerProps={{
        onClose: onCancel,
        //destroyOnClose: true,
        maskClosable: false,
      }}
    >
      <Row gutter={24}>
        <Col span={24}>
          <ProFormSelect
            name="productId"
            label="产品"
            options={productOptions}
            rules={[{ required: true, message: '请选择产品' }]}
          />
        </Col>
        <Col span={24}>
          <ProFormDependency name={['productId']}>
            {({ productId }) => {
              return (
                <ProFormSelect
                  name="serviceTypeId"
                  label="服务类型"
                  params={{ productId }}
                  request={loadServiceTypes}
                  rules={[{ required: true, message: '请选择服务类型' }]}
                />
              );
            }}
          </ProFormDependency>
        </Col>
        <Col span={24}>
          <ProFormDigit
            name="licenseDays"
            label="授权天数"
            wrapperCol={{ span: 4 }}
            min={0}
            max={9999}
            rules={[{ required: true }]}
          />
        </Col>
        <Col span={24}>
          <ProFormText
            name="name"
            label="名称"
            rules={[{ required: true, message: '请输入名称' }]}
            placeholder="请输入名称"
          />
        </Col>
        <Col span={12}>
          {' '}
          <ProFormSelect
            name="channel"
            label="渠道"
            options={c.PurchaseChannelSetOptions}
            rules={[{ required: true, message: '请选择购买渠道' }]}
          />
        </Col>
        <Col span={12}>
          {' '}
          <ProFormText
            name="channelItemId"
            label="渠道商品ID"
            rules={[{ required: true, message: '请输入渠道商品ID' }]}
            placeholder="请输入渠道商品ID"
          />
        </Col>
        <Col span={12}>
          <ProFormText name="title" label="标题(官网)" />
        </Col>
        <Col span={12}>
          <ProFormText name="subTitle" label="副标题(官网)" />
        </Col>
        <Col span={24}>
          <ProFormText name="introduce" label="简介(官网)" />
        </Col>
        <Col span={12}>
          <ProFormDigit
            name="orgPrice"
            label="原价(官网)"
            min={0}
            max={99999}
            fieldProps={{ precision: 2 }}
            // wrapperCol={{ span: 4 }}
          />
        </Col>
        <Col span={12}>
          <ProFormDigit
            name="price"
            label="售价(官网)"
            min={0}
            max={99999}
            fieldProps={{ precision: 2 }}
            // wrapperCol={{ span: 4 }}
          />
        </Col>
        <Col span={12}>
          <ProFormSwitch name="display" label="显示(官网)" />
        </Col>
        <Col span={12}>
          <ProFormSwitch name="isDefault" label="推荐(官网)" />
        </Col>
        <Col span={24}>
          <ProFormDigit
            name="sort"
            label="排序"
            wrapperCol={{ span: 4 }}
            min={0}
            max={9999}
          />
        </Col>
        <Col span={24}>
          <ProFormSwitch name="status" label="状态" />
        </Col>
        <Col span={24}>
          <ProFormTextArea name="remark" label="备注" />
        </Col>
      </Row>
    </DrawerForm>
  );
};

export default Form;
